<template>
	<view>
		<view class="tabs">
			<u-tabs
				:list="list2"
				@click="tabs_click2"
						:scrollable="false"
				lineColor="#333"
				:inactiveStyle="{
					color: '##626262',
					transform: 'scale(1)',
					FontSize:'30rpx'
				}"
				:activeStyle="{
					color: '#333',
					fontWeight: 'bold',
					transform: 'scale(1.05)',
					FontSize:'30rpx'
					
				}"
				lineHeight="2"
				lineWidth="18"
			></u-tabs>
		</view>
		<view class="tabs" v-if="status2==4||status2==3">
			<u-tabs
				:list="list1"
				@click="tabs_click"
						:scrollable="false"
				lineColor="#333"
				:inactiveStyle="{
					color: '##626262',
					transform: 'scale(1)',
					FontSize:'30rpx'
				}"
				:activeStyle="{
					color: '#333',
					fontWeight: 'bold',
					transform: 'scale(1.05)',
					FontSize:'30rpx'
					
				}"
				lineHeight="2"
				lineWidth="18"
			></u-tabs>
		</view>
		 <scroll-view scroll-y="true" class="scroll" @scrolltolower="scrolltolower" :style="{height:scrollH+'px'}">
			 <view v-if="list.length==0" style="padding-top: 300rpx;" class="">
			 	<u-empty text="列表数据为空" mode="list"></u-empty>
			 </view>
			 <view class="" v-for="(item,index) in list" v-if="status2==2" style="width: 630rpx;margin: 0 auto;background: #fff;border-radius: 20rpx;padding: 30rpx 30rpx;margin-bottom: 20rpx;">
				<view class="" style="display: flex;align-items: center;justify-content: space-between;margin-bottom: 24rpx;">
					<view class="" style="display: flex;align-items: center;">
						<view class="" style="font-size: 0;">
							<image v-if="item.doctors" style="width: 44rpx;height: 44rpx;" :src="ImgUrl+item.doctors[0].doctor.avatar" mode=""></image>
						</view>
						<view class="" v-if="item.doctors" style="margin-left: 16rpx;margin-right: 4rpx;font-size: 32rpx;color: #333;">
							{{item.doctors[0].doctor.name || ''}}
						</view>
						<view class="" v-if="item.doctors" style="font-size: 26rpx;color: #444;margin-right: 8rpx;">
							{{item.doctors[0].doctor.level.name || ''}}
						</view>
						<view class="" style="padding: 4rpx 6rpx;border-radius: 4rem;background: var(--ff-9-d-43, #FF9D43);font-size: 20rpx;color: #fff;">
							{{
							item.type==1?'图文':
							item.type==2?'视频':
							item.type==3?'飞刀':
							item.type==4?'多人':''
							}}问诊
						</view>
					</view>
					<view v-if="item.status==2" class="" style="font-size: 32rpx;color: var(--ff-9-d-43, #FF9D43)" :style="">
						进行中
					</view>
					<view v-if="item.status==3||item.status==4" class="" style="font-size: 32rpx;color: #333;" :style="">
						已完成
					</view>
				</view>
				<view class="" style="margin-bottom: 14rpx;display: flex; align-items: center;justify-content: space-between;">
					<view class="" style="font-size: 24rpx;color: #333;">
						科室名称
					</view>
					<view class="" v-if="item.doctors" style="font-size: 24rpx;color: #999;">
						{{item.doctors[0].doctor.hospital.name || ''}}-{{item.doctors[0].doctor.department.name || ''}}
					</view>
				</view>
				<view class="" style="margin-bottom: 14rpx;display: flex; align-items: center;justify-content: space-between;">
					<view class="" style="font-size: 24rpx;color: #333;">
						咨询时间
					</view>
					<view class="" style="font-size: 24rpx;color: #999;">
						{{item.created_at}}
					</view>
				</view>
				<view class="" style="margin-bottom: 14rpx;display: flex; align-items: center;justify-content: space-between;">
					<view class="" style="font-size: 24rpx;color: #333;">
						问诊类型
					</view>
					<view class="" style="font-size: 24rpx;color: #999;">
						{{
						item.type==1?'图文':
						item.type==2?'视频':
						item.type==3?'飞刀':
						item.type==4?'多人':''
						}}问诊
					</view>
				</view>
				<view class="" style="margin-bottom: 14rpx;display: flex; align-items: center;justify-content: space-between;">
					<view class="" style="font-size: 24rpx;color: #333;">
						服务费
					</view>
					<view class="" style="font-size: 24rpx;color: #999;">
						{{
						item.type==1?item.doctors[0].doctor.tag1_price:
						item.type==2?item.doctors[0].doctor.tag2_price:
						item.type==3?item.doctors[0].doctor.tag3_price:
						item.type==4?item.doctors[0].doctor.tag4_price:''
						}}
					</view>
				</view>
			 </view>
		 	<view class="list" v-if="status2==1">
				<view class="list_item" v-for="(item,index) in list" :key="index">
					<view class="list_item_top flex">
						<view class="list_item_top_left flex1">
							<!-- <image src="/static/images/order_icon.png" class="list_item_top_left_img" mode=""></image> -->
							<view class="list_item_top_left_text">
								线上名医
							</view>
						</view>
						<view v-if="item.status==2" class="list_item_top_right">
							等待付款
						</view>
						<!-- <view class="list_item_top_right" style="color: #D95858;">
							待发货
						</view>
						<view class="list_item_top_right" style="color: #D95858;">
							待收货
						</view>
						<view class="list_item_top_right" style="color: #D95858;">
							交易完成
						</view> -->
						<view v-if="item.is_comment==1" class="list_item_top_right" style="color: #262626;">
							已评价
						</view>
						<view v-else class="list_item_top_right" style="color: #262626;">
							未评价
						</view>
					</view>
					<view class="list_item_min">
						<view class="list_item_min_orderno">
							订单编号：{{item.order_id}}
						</view>
						<view class="list_item_min_flex flex">
							<image :src="ImgUrl+item.img" class="list_item_min_flex_img" mode="" v-if="item.img"></image>
							<div class="list_item_min_flex_img" mode="" v-else>
								暂无
							</div>
							<view class="list_item_min_flex_right">
								<view class="list_item_min_flex_right_top line-2">
									{{item.name}}
								</view>
								<!-- 非商城订单不显示规格（透明度为0） -->
								<view style="opacity: 0;" class="lable flex1">
									<view class="lable_item">
										红色
									</view>
								</view>
								<view class="flex" style="margin-top: 8rpx;">
									<view class="prce">
										<!-- 200积分+ -->
										{{item.price}}元
									</view>
									<view class="num">
										x{{item.num}}
									</view>
								</view>
							</view>
						</view>
						<view v-if="item.is_comment!=1" class="order_list_bottom flex1">
							<view v-if="item.status==2" @click="goPay(item)" class="order_list_bottom_btn fukuan">
								去付款
							</view>
							<!-- <view class="order_list_bottom_btn">
								取消
							</view>
							<view class="order_list_bottom_btn">
								查看详情
							</view>
							<view class="order_list_bottom_btn fukuan">
								确认收货
							</view>
							<view class="order_list_bottom_btn">
								查看物流
							</view> -->
							<view v-if="item.is_comment!=1" class="order_list_bottom_btn" @click="go_pingjia(item)">
								评价订单
							</view>
							<!-- <view class="order_list_bottom_btn">
								删除记录
							</view> -->
						</view>
					</view>
				</view>
			</view>
			<view class="list" v-if="status2==4||status2==3">
				<view class="list_item" @click="clickOrder(item.id)" v-for="(item,index) in list" :key="index">
					<view class="list_item_top flex">
						<view class="list_item_top_left flex1">
							<!-- <image src="/static/images/order_icon.png" class="list_item_top_left_img" mode=""></image> -->
							<view class="list_item_top_left_text">
								线上名医
							</view>
						</view>
						<view v-if="item.state==0&&item.pay_state==2" class="list_item_top_right">
							支付失败
						</view>
						<view v-if="item.state==0&&item.pay_state==0" class="list_item_top_right">
							等待付款
						</view>
						<view v-if="item.state==1" class="list_item_top_right" style="color: #D95858;">
							待发货
						</view>
						<view v-if="item.state==2" class="list_item_top_right" style="color: #D95858;">
							已取消
						</view>
						<view v-if="item.state==3" class="list_item_top_right" style="color: #D95858;">
							待收货
						</view>
						<view v-if="item.state==4" class="list_item_top_right" style="color: #D95858;">
							交易完成
						</view>
						<view v-if="item.state==5" class="list_item_top_right" style="color: #262626;">
							订单完成
						</view>
						<view v-if="item.state==8" class="list_item_top_right" style="color: #D95858;">
							退款中
						</view>
						<view v-if="item.state==7" class="list_item_top_right" style="color: #D95858;">
							退款成功
						</view>
						<view v-if="item.state==9" class="list_item_top_right" style="color: #D95858;">
							退款失败
						</view>
					</view>
					<view class="list_item_min">
						<view class="list_item_min_orderno">
							订单编号：{{item.order_sn}}
						</view>
						<view class="list_item_min_flex flex">
							<image v-if="item.items" :src="ImgUrl+item.items[0].goods.img[0]" class="list_item_min_flex_img" mode=""></image>
							<view class="list_item_min_flex_right">
								<view class="list_item_min_flex_right_top line-2">
									{{item.items[0].goods.name}}
								</view>
								<!-- 非商城订单不显示规格（透明度为0） -->
								<view v-if="item.items[0].sku!=null" class="lable flex1">
									<view  style="margin-right: 10rpx;" v-for="(items,indexs) in item.items[0].sku.difference_text" class="lable_item">
										{{items}}
									</view>
								</view>
								<view class="flex" style="margin-top: 8rpx;">
									<view class="prce">
										<template v-if="status2==4">
											{{item.score}}积分
										</template>
										<template v-if="status2==4&&item.amount">
											+
										</template>
										<template v-if="item.amount">
											{{item.amount}}元
										</template>
									</view>
									<view class="num">
										x{{item.items[0].num}}
									</view>
								</view>
							</view>
						</view>
						<view v-if="item.state==0||item.state==1||item.state==3||item.state==4||item.state==5" class="order_list_bottom flex1">
							<view v-if="item.state==0&&item.pay_state==0" class="order_list_bottom_btn fukuan">
								付款
							</view>
							<view @click.stop="cancle(item.id)" v-if="item.state==0&&item.pay_state==0" class="order_list_bottom_btn">
								取消
							</view>
							<view v-if="item.state==1" class="order_list_bottom_btn">
								查看详情
							</view>
							<view @click.stop="confirm(item.id)" v-if="item.state==3" class="order_list_bottom_btn fukuan">
								确认收货
							</view>
							<view v-if="item.state==3" @click.stop="seelogistics(item)" class="order_list_bottom_btn">
								查看物流
							</view>
							<view v-if="item.state==4" class="order_list_bottom_btn" @click.stop="go_pingjia(item,1)">
								评价订单
							</view>
							<!-- ||item.state==2 -->
							<view @click.stop="del(item.id)" v-if="item.state==5||(item.state==0&&item.pay_state==2)" class="order_list_bottom_btn">
								删除记录
							</view>
						</view>
						<view @click.stop="seelogistics(item)" v-if="(JSON.stringify(item.logistics)!='[]'&&JSON.stringify(item.logistics)!='{}')" class="" style="margin-top: 15rpx;display: flex;align-items: center; width: 686rpx;height: 62rpx;border-radius: 12rem;background: #FBFBFC;">
							<!-- <view v-if="true" class="" style="flex-shrink: 0;margin-left: 32rpx;margin-right: 24rpx;font-size: 22rpx;color: #D95858;">
								待取件
							</view> -->
							<view class="" style="flex-shrink: 0;margin-left: 32rpx;margin-right: 24rpx;font-size: 22rpx;color: #262626;">
								{{item.logistics.status}}
							</view>
							<view class="" style="flex: 1;-webkit-line-clamp: 1;display: -webkit-box;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;color: #626262;font-size: 22rpx;line-height: 62rpx;">
								{{item.logistics.list.status}}
							</view>
							<view class="" style="font-size: 0;margin-left: 13rpx;margin-right: 24rpx;">
								<image style="width: 14rpx;height: 14rpx;" src="https://bucketoss10086.oss-cn-beijing.aliyuncs.com/images/rightArrow.png" mode=""></image>
							</view>
						</view>
						<view v-if="item.state==99" class="" style="margin-top: 15rpx;display: flex;align-items: center; width: 686rpx;height: 62rpx;border-radius: 12rem;background: #FBFBFC;">
							<view class="" style="color: #D95858;flex-shrink: 0;margin-left: 32rpx;margin-right: 24rpx;font-size: 22rpx;">
								拒绝原因:
							</view>
							<view class="" style="color: #626262;font-size: 22rpx;line-height: 62rpx;flex: 1;">
								<!-- {{item.}} -->
							</view>
							<!-- <view class="" style="font-size: 0;margin-left: 13rpx;margin-right: 24rpx;">
								<image style="width: 14rpx;height: 14rpx;" src="https://bucketoss10086.oss-cn-beijing.aliyuncs.com/images/rightArrow.png" mode=""></image>
							</view> -->
						</view>
					</view>
				</view>
			</view>
		 </scroll-view>
	</view>
</template>

<script>
	import {
		// order_list,
		// consultation_order_list,
		goods_order,
		score_order,
		scorecancel,
		scoredel,
		scorereceive,
		goodscancel,
		goodsdel,
		goodsreceive
	} from "@/api/common.js"
	import getScrollHeight from "@/utils/utils.js"
	export default {
		data() {
			return {
				list2:[
					// {
					// 	id:1,
					// 	name: '课程订单'
					// },
					// {
					// 	id:2,
					// 	name: '会诊订单'
					// },
					{
						id:3,
						name: '商城订单'
					},
					{
						id:4,
						name: '积分订单'
					}
				],
				status2:3,//
				list1: [
					{
						id:1,
						name: '全部'
					},
					{
						id:2,
						name: '待付款'
					},
					{
						id:3,
						name: '待发货'
					},
					{
						id:4,
						name: '待收货'
					},
					{
						id:5,
						name: '待评价'
					}
				],
				scrollH:'',
				status:1,//
				page:1,
				last_page:1,
				list:[],
			}
		},
		onReady() {
			let t = this
			getScrollHeight.getScrollHeight('scroll').then(res=>{
				t.scrollH = res - 10
			})	
		},
		computed:{
			ImgUrl(){
				return this.$store.state.ImgUrl
			}
		},
		onLoad() {
			
		},
		onShow() {
			this.page=1;
			this.getOrderList(this.status2);
		},
		methods: {
			// 课程订单去支付
			goPay(item){
				
			},
			// 取消订单
			cancle(id){
				uni.showModal({
					title:'提示',
					content:'确认取消订单吗？',
					success:res=>{
						if(res.confirm){
							if(this.status2==3){
								goodscancel({id}).then(res=>{
									uni.showToast({
										title:'操作成功',
										icon:'none'
									})
									this.page=1;
									this.getOrderList(this.status2);
								})
							}else{
								scorecancel({id}).then(res=>{
									uni.showToast({
										title:'操作成功',
										icon:'none'
									})
									this.page=1;
									this.getOrderList(this.status2);
								})
							}
						}
					}
				})
			},
			// 删除订单
			del(id){
				uni.showModal({
					title:'提示',
					content:'确认删除订单吗？',
					success:res=>{
						if(res.confirm){
							if(this.status2==3){
								goodsdel({id}).then(res=>{
									uni.showToast({
										title:'操作成功',
										icon:'none'
									})
									this.page=1;
									this.getOrderList(this.status2);
								})
							}else{
								scoredel({id}).then(res=>{
									uni.showToast({
										title:'操作成功',
										icon:'none'
									})
									this.page=1;
									this.getOrderList(this.status2);
								})
							}
							
						}
					}
				})
			},
			// 确认收货
			confirm(id){
				uni.showModal({
					title:'提示',
					content:'确认收到货物吗？',
					success:res=>{
						if(res.confirm){
							if(this.status2==3){
								goodsreceive({id}).then(res=>{
									uni.showToast({
										title:'操作成功',
										icon:'none'
									})
									this.page=1;
									this.getOrderList(this.status2);
								})
							}else{
								scorereceive({id}).then(res=>{
									uni.showToast({
										title:'操作成功',
										icon:'none'
									})
									this.page=1;
									this.getOrderList(this.status2);
								})
							}
							
						}
					}
				})
			},
			clickOrder(id){
				let type;
				if(this.status2==3){
					type=1;
				}else{
					type=0
				}
				uni.navigateTo({
					url:`./shopOrderDetail?id=${id}&type=${type}`
				})
			},
			tabs_click(e){
				if(this.status==e.id){
					return;
				}
				this.status = e.id;
				this.page=1;
				this.getOrderList(this.status2);
			},
			tabs_click2(e){
				if(this.status2==e.id){
					return;
				}
				this.status2 = e.id;
				this.list = [];
				this.page=1;
				this.getOrderList(this.status2);
			},
			scrolltolower(){
				if(this.page < this.last_page){
					this.page++;
					this.getOrderList(this.status2)
				}
			},
			getOrderList(status2){
				let data = {
					page:this.page,
				}
				if(status2==1){
					data.status = 1;
					order_list(data).then(res=>{
						console.log(res,'cs-dingdanliebiao');
						this.last_page = res.data.last_page;
						if(this.page==1){
							this.list = res.data.data;
						}else{
							this.list.push(...res.data.data)
						}
					})
				}else if(status2==2){
					consultation_order_list(data).then(res=>{
						console.log(res,'cs-dingdanliebiao');
						this.last_page = res.data.last_page;
						if(this.page==1){
							this.list = res.data.data;
						}else{
							this.list.push(...res.data.data);
						}
					})
				}else if(status2==3){
					// 0-待付款，1-待发货，2-已取消，3-待收货，4-待评价，5-已完成，6-已删除，7-已退款
					if(this.status==1){
						// 全部
						
					}else if(this.status==2){
						// 待付款
						data.state = 0;
					}else if(this.status==3){
						// 待发货
						data.state = 1;
					}else if(this.status==4){
						// 待收货
						data.state = 3;
					}else if(this.status==5){
						// 待评价
						data.state = 4;
					}
					goods_order(data).then(res=>{
						console.log(res,'cs-dingdanliebiao');
						this.last_page = res.data.last_page;
						if(this.page==1){
							this.list = res.data.data;
						}else{
							this.list.push(...res.data.data);
						}
					})
				}else if(status2==4){
					// 0-待付款，1-待发货，2-已取消，3-待收货，4-待评价，5-已完成，6-已删除，7-已退款
					if(this.status==1){
						// 全部
						
					}else if(this.status==2){
						// 待付款
						data.state = 0;
					}else if(this.status==3){
						// 待发货
						data.state = 1;
					}else if(this.status==4){
						// 待收货
						data.state = 3;
					}else if(this.status==5){
						// 待评价
						data.state = 4;
					}
					score_order(data).then(res=>{
						console.log(res,'cs-dingdanliebiao');
						this.last_page = res.data.last_page;
						if(this.page==1){
							this.list = res.data.data;
						}else{
							this.list.push(...res.data.data);
						}
					})
				}
			},
			go_pingjia(item,type=0){
				if(type==1){
					item.evaliateType=1;
				}
				let type2;
				if(this.status2==3){
					type2=1;
				}else{
					type2=0
				}
				item.typess = type2;
				uni.navigateTo({
					url:'/pages/Evaluate/Evaluate?obj='+encodeURIComponent(JSON.stringify(item))
				})
			},
			seelogistics(item){
				let type;
				if(this.status2==3){
					type=1;
				}else{
					type=0
				}
				uni.navigateTo({
					url:'/pages/ShopOrder/seelogistics?id='+item.id+'&type='+type
				})
			}
		}
	}
</script>

<style>
page{
	background: #F4F4F4;
}
.tabs{
	background: #fff;
}
.list_item:first-child{
	margin-top:0;
}
.list_item{
	width: 750rpx;
	/* height: 408rpx; */
	margin-top: 22rpx;
	background: #fff;
	padding: 30rpx;
	box-sizing: border-box;
}
.flex{
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.flex1{
	display: flex;
	align-items: center;
}
.list_item_top_left_img{
	width: 34rpx;
	height: 34rpx;
}
.list_item_top_left_text{
	height: 34rpx;
	line-height: 34rpx;
	color: #262626;
	font-family: Source Han Sans SC;
	font-size: 22rpx;
	font-weight: 400;
	margin-left: 4rpx;
}
.list_item_top_right{
	height: 34rpx;
	line-height: 34rpx;
	color:  #F4895E;
	text-align: right;
	font-family: Alibaba PuHuiTi 2.0;
	font-size: 24rpx;
	font-weight: 400;
}
.list_item_min_orderno{
	color:#626262;
	font-family: Alibaba PuHuiTi 2.0;
	font-size: 20rpx;
	font-weight: 400;
}
.list_item_min_flex{
	margin-top: 14rpx;
}
.list_item_min_flex_img{
	width: 176rpx;
	height: 176rpx;
	border-radius: 12rpx;
	background: #ccc;
	text-align: center;
	line-height: 176rpx;
	color: #fff;
	opacity: 0.7;
}
.list_item_min_flex_right{
	width: calc(100% - 196rpx);
}
.list_item_min_flex_right_top{
	height: 72rpx;
	color: #262626;
	font-family: Source Han Sans CN;
	font-size: 24rpx;
	font-weight: 400;
}
.lable{
	width: 100%;
}
.lable_item{
	display: inline-flex;
	height: 44rpx;
	line-height: 44rpx;
	padding: 0rpx 12rpx;
	border-radius: 4rpx;
	color: #262626;
	font-family: Alibaba PuHuiTi 2.0;
	font-size: 20rpx;
	font-weight: 400;
	border: 1rpx solid #626262;
	margin-top: 10rpx;
}
.prce{
	color: #E5432E;
	font-family: Alibaba PuHuiTi 2.0;
	font-size: 28rpx;
	font-weight: 400;
}
.num{
	color: #000;
	font-family: Alibaba PuHuiTi 2.0;
	font-size: 22rpx;
	font-weight: 400;
}
.order_list_bottom{
	flex-direction: row-reverse;
	padding-top: 20rpx;
	border-top: 1rpx solid #F4F4F4;
	margin-top: 32rpx;
	flex-wrap: wrap;
}
.order_list_bottom_btn{
	display: inline-flex;
	padding: 12rpx 40rpx;
	border-radius: 60rpx;
	border: 0.5px solid #CCC;
	font-family: Alibaba PuHuiTi 2.0;
	font-size: 24rpx;
	font-weight: 400;
	margin-left: 20rpx;
}
.fukuan{
	background-color: #0165FB;
	color: #FFF;
}
.scroll{
	margin-top: 22rpx;
}
</style>
